<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="js/webuploader.css"></link>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/webuploader.js"></script>
</head>

<body>


<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
    <div id="number"></div>
</div>
<!-- 3.添加js代码 -->
<script type="text/javascript">
    var fileArray = [];
    var guid = WebUploader.Base.guid();

    var uploader = WebUploader.create(
        {
            swf: "../js/Uploader.swf",
            server: "/api/breakpoint-upload",
            pick: {
                id: '#picker',
                multiple: true
            },
            auto: true,  // 分块上传设置
            // 是否分块
            chunked: true,
            // 每块文件大小（默认5M）
            chunkSize: 5 * 1024 * 1024,
            // 开启几个并非线程（默认3个）
            threads: 3,
            // 在上传当前文件时，准备好下一个文件
            //        prepareNextFile: true,
            //  sendAsBinary: true,
            //   formData: {"guid": guid},
            //   method: 'POST',
        }
    );

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }
        console.log($percent)
        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );
        $("#number").html(percentage * 100 + '%')
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $('#thelist').append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>' );
    });
    // //上传分块之前设置请求头
    // uploader.on('uploadBeforeSend', function (headers) {
    //     headers={
    //         contentType: "application/json; charset=utf-8",
    //     };
    // });
    //点击上传之前调用的方法
    uploader.on("uploadStart", function (file) {
        // var paramOb = {"guid": guid, "filedId": file.source.ruid}
        // uploader.options.formData.guid = guid;
        // // uploader.options.headers={
        // //    // "Content-Type": "application/json; charset=utf-8",
        // //  //   "Content-Type":"multipart/form-data"
        // // }
        // console.log(uploader.options)

        let time = new Date().valueOf()
        file.name = time + file.name
        // fileArray.push(paramOb);
    });

    // // 文件上传过程中创建进度条实时显示。
    // uploader.on('uploadProgress', function (file, percentage) {
    //     var $li = $('#fileId');
    //     $li.find('p.state').text('上传中（' + parseInt(percentage * 100) + '%）');
    // });
    //文件成功、失败处理
    uploader.on('uploadSuccess', function (file) {
//        var successDuid = file.source.ruid;
        var chunks = file.blocks.length;
        var realFileName = file.name;
        var folder = file.id;

        // $.post("/api/file/breakpoint-upload", {
        //     "guid": guid,
        //     "chunks": chunks,
        //     "realFileName": realFileName,
        //     "folder": folder
        // }, function (data, status) {
        //     alert("文件上传成功！")
        // });

    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

</script>
</body>
</html>
